/** 
 * 商品列表
 */
import {useState,useEffect} from 'react'
import {getGoodList} from './serve'
import GoodItemView from './goodItem'
function GoodView(){
  const [goodList,setGoogList] = useState([])

 /**
  *  获取后台接口
  */
  useEffect(()=>{
    getGoodList()
    .then(res=>{
      if(res.data.meta.status === 200){
        setGoogList(res.data.message.goods)
      }
    })
  },[])

/**
 *  根据id 删除某个商品
 */
function deleteGoodItem(id){
  let newgoodList =  goodList.filter(item=>item.goods_id !== id)
  setGoogList(newgoodList)
}


  return(
    <>
      <h1>商品列表</h1>
    {goodList.map((good)=>{
        return <GoodItemView key={good.goods_id} good ={good} deleteItem = {deleteGoodItem}/>
      })}
      <hr />
    </>
  )
}


export default GoodView